<!-- 库区库位编辑弹窗 -->
<template>
  <ele-modal form :width="420" :model-value="modelValue" title="打印商品标签" @update:model-value="updateModelValue">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="打印机" prop="xpyun_ids">
        <el-select v-model="form.xpyun_ids" clearable multiple placeholder="请选择打印机">
          <el-option v-for="item in printerList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="打印数量" prop="print_num">
        <el-input v-model.number="form.print_num" :formatter="value => value.replace(/[^\d]/g, '')" placeholder="请填写打印数量" />
      </el-form-item>
      <el-form-item label="打印日期" prop="date">
        <el-switch
          v-model="form.date"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <el-form-item label="打印总数">
        <div class="text-15px font-bold">
          <span class="text-primary mr-2px">{{ selectionIds.length }}</span><span class="font-normal">(品数)</span> * {{ form.print_num }} = {{ Big(selectionIds.length).times(form.print_num).valueOf() }}
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="save">
        提交打印
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  warehouseId: Number,
  selectionIds: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['done', 'update:modelValue'])

const { Big } = utils

/** 提交状态 */
const loading = ref(false)

/** 表单实例 */
const formRef = ref(null)

/** 表单数据 */
const [form, resetFields] = utils.useFormData({
  xpyun_ids: [],
  print_num: 1,
  date: false,
})

/** 表单验证规则 */
const rules = reactive({
  xpyun_ids: {
    required: true,
    message: '请选择打印机',
    trigger: 'change',
    type: 'array',
  },
  print_num: {
    required: true,
    type: 'number',
    min: 1,
    message: '请填写打印数量',
    trigger: 'blur',
  },
})

const printerList = ref([])

function getPrinterList() {
  utils.get('/xpyun/wIdToXpyunList', { warehouse_id: props.warehouseId }).then((res) => {
    printerList.value = res.data
    if (printerList.value.length) {
      form.xpyun_ids = [printerList.value[0].id]
    }
  })
}

/** 保存编辑 */
function save() {
  formRef.value?.validate?.((valid) => {
    if (!valid)
      return

    loading.value = true
    utils.post('/xpyun/printProduct', { ...form, date: form.date ? utils.formatDate(0, 'YYYY-MM-DD') : '', product_ids: props.selectionIds })
      .then((res) => {
        utils.message(res.msg, res.success)
        if (res.success) {
          updateModelValue(false)
          emit('done')
        }
      })
      .finally(() => {
        loading.value = false
      })
  })
}

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}

watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
      resetFields()
      formRef.value?.clearValidate?.()
      getPrinterList()
    }
  },
)
</script>
